import React from 'react';
import {connect} from 'react-redux';
import {setTaskExerciseList, addTaskExerciseItem, delTaskExerciseItem} from '../../actions';

const uniqueString = require('unique-string');

function TestComponent(props) {
    const {taskExerciseList, setTaskExerciseList, addTaskExerciseItem, delTaskExerciseItem} = props;

    return (<div className="test-component">
        <h2>TestComponent</h2>
        {
            taskExerciseList.map((item, index) => {
                return <p key={uniqueString()}>
                    <span>{item.id + '-' + item.list}</span>
                    <button type="button" onClick={() => {
                        delTaskExerciseItem(item.id);
                        console.log('删除taskExerciseList---', taskExerciseList)
                    }}>删除
                    </button>
                </p>
            })
        }
        <button type="button" onClick={() => {
            console.log('获取taskExerciseList---', taskExerciseList)
        }}>获取数据
        </button>
        <button type="button" onClick={() => {
            setTaskExerciseList([{id: uniqueString(), list: []}, {id: uniqueString(), list: []}])
            console.log('初始化taskExerciseList---', taskExerciseList)
        }}>init数据
        </button>

        <button type="button" onClick={() => {
            addTaskExerciseItem({id: uniqueString(), list: []})
            console.log('添加taskExerciseList---', taskExerciseList)
        }}>添加数据
        </button>
    </div>);
}

function mapStateToProps(state) {
    return {
        taskExerciseList: state.exercise
    }
}

function mapDispatchToProps(dispatch) {
    return {
        setTaskExerciseList: (list) => dispatch(setTaskExerciseList(list)),
        addTaskExerciseItem: item => dispatch(addTaskExerciseItem(item)),
        delTaskExerciseItem: id => dispatch(delTaskExerciseItem(id))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(TestComponent);
